<template>
    <div class="wrap">
        <div>
            <div class="wrap-card">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <p class="product-hr-title">基本信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="药品名称">
                                <span>{{formItem.ProName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="生产厂家">
                                <span>{{formItem.FactoryName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="厂家确认" prop="FactoryID">
                                <Select v-model="formItem.FactoryID" filterable remote :remote-method="remoteMethod" :loading="Factoryloading">
                                    <Option
                                        v-for="(option, index) in FactoryList"
                                        :value="option.ID"
                                        :key="index"
                                        @click.native="handleFactory(option)"
                                    >{{option.SupplierName}}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="进货单位">
                                <span>{{formItem.UnitBuy}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="保质期(天)">
                                <span>{{formItem.ShelfLife}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品简称">
                                <span>{{formItem.ShortName}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品分类">
                                <div class="categoriesList">
                                    <Cascader :data="categoriesList" v-model="categoriesListValue" placeholder="请选择商品分类" :disabled="true"></Cascader>
                                </div>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="销售单位">
                                <span>{{formItem.UnitSales}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="单次剂量">
                                <span>{{formItem.Dose}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="商品规格">
                                <span>{{formItem.Spec}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="药品剂型">
                                <div class="method">
                                    <dictionaries
                                        v-if="isAsyncSelect"
                                        :currentModel="formItem.Method"
                                        @setDictionaries="setMethod"
                                        :name="'剂型'"
                                        :value="'Method'"
                                        :disabled="true"
                                        :placeholder="''"
                                    ></dictionaries>
                                </div>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="换算系数">
                                <span>{{formItem.UnitCount}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="标准用法">
                                <div class="method">
                                    <dictionaries
                                        v-if="isAsyncSelect"
                                        :currentModel="formItem.Rate"
                                        @setDictionaries="setMethods"
                                        :name="'标准用法'"
                                        :value="'Rate'"
                                        :disabled="true"
                                        :placeholder="''"
                                        :isKey="true"
                                    ></dictionaries>
                                </div>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="批准文号">
                                <span>{{formItem.StdDocID}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="常用剂量">
                                <span>{{formItem.UnitDoseVal}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="剂量单位">
                                <span>{{formItem.UnitDoseName}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="给药途径">
                                <span>{{formItem.Usage}}</span>
                            </FormItem>
                        </i-col>
                        <!-- <i-col :lg="{ span: 5}">
                            <FormItem label="服务分类">
                                <RadioGroup v-model="formItem.IsService">
                                    <Radio label="false" disabled>否</Radio>
                                    <Radio label="true" disabled>是</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>-->
                    </Row>
                    <Row>
                        <p class="product-hr-title">图片信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="药品图">
                                <!-- <div class="outer_box"> -->
                                <!-- 因为旋转是在中心点旋转的,而放大缩小是在左上角 -->
                                <!-- 所以给图片的父元素加上放大缩小 -->
                                <!-- 给图片加上旋转 -->
                                <div class="img_box" style="width:100px;height:100px;margin-top:10px">
                                    <img :src="formItem.PictureFront" alt @click="handleView('visible')" style="width:100px;height:100px" />
                                </div>
                                <!-- </div> -->
                                <Modal title="查看大图" v-model="visible" class-name="fl-image-modal" draggable id="drag" footer-hide>
                                    <img :src="formItem.PictureFront" v-if="visible" style="display:block;margin:0 auto;width:60%;height:60%" />
                                </Modal>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="药品图">
                                <!-- <div class="outer_box"> -->
                                <!-- 因为旋转是在中心点旋转的,而放大缩小是在左上角 -->
                                <!-- 所以给图片的父元素加上放大缩小 -->
                                <!-- 给图片加上旋转 -->
                                <div class="img_box" style="width:100px;height:100px;margin-top:10px">
                                    <img :src="formItem.PictureSide" alt @click="handleView('visibles')" style="width:100px;height:100px" />
                                </div>
                                <!-- </div> -->
                                <Modal title="查看大图" v-model="visibles" class-name="fl-image-modal" draggable id="drag" footer-hide>
                                    <img :src="formItem.PictureSide" v-if="visibles" style="display:block;margin:0 auto;width:50%;height:50%" />
                                </Modal>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="药品图">
                                <!-- <div class="outer_box"> -->
                                <!-- 因为旋转是在中心点旋转的,而放大缩小是在左上角 -->
                                <!-- 所以给图片的父元素加上放大缩小 -->
                                <!-- 给图片加上旋转 -->
                                <div class="img_box" style="width:100px;height:100px;margin-top:10px">
                                    <img :src="formItem.PictureExplain" alt @click="handleView('visibless')" style="width:100px;height:100px" />
                                </div>
                                <!-- </div> -->
                                <Modal title="查看大图" v-model="visibless" class-name="fl-image-modal" draggable id="drag" footer-hide>
                                    <img :src="formItem.PictureExplain" v-if="visibless" style="display:block;margin:0 auto;width:50%;height:50%" />
                                </Modal>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <p class="product-hr-title">价格信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="原价">
                                <span>{{formItem.PriceOld}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="现价">
                                <span>{{formItem.PriceNew}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="拆分单价">
                                <span>{{formItem.PriceUnit}}</span>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <p class="product-hr-title">编码信息</p>
                        <div class="product-hr"></div>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="条形码">
                                <span>{{formItem.BarCode}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="厂家货号">
                                <span>{{formItem.SupCode}}</span>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="拼音码">
                                <span>{{formItem.PinYinCode}}</span>
                            </FormItem>
                        </i-col>
                    </Row>

                    <Row style="margin-top:40px;margin-left:-100px">
                        <i-col :lg="{ span:20}">
                            <FormItem>
                                <i-col :lg="{ span: 1}" style="margin-right:35px">
                                    <Button type="primary" @click="closePage">返回</Button>
                                </i-col>
                                <i-col :lg="{ span: 2}">
                                    <Button @click="addFactory" type="primary">新建厂家</Button>
                                </i-col>
                                <i-col :lg="{ span: 2}">
                                    <Button @click="handleSubmit('formItem')" type="primary">审核通过</Button>
                                </i-col>
                                <i-col :lg="{ span: 2}">
                                    <Button @click="auditRejected('formItem')" type="primary">审核驳回</Button>
                                </i-col>
                                <!-- <i-col :lg="{ span: 2}">
                                    <Button @click="handleGetNext" type="primary">下一个</Button>
                                </i-col>-->
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
        </div>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle">
            <div v-if="isModal">
                <Form ref="formItems" :model="formItems" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 15}">
                            <FormItem label="厂家名称" prop="FactoryName">
                                <Input v-model="formItems.FactoryName" placeholder="请输入厂家名称" style="width: 300px" />
                            </FormItem>
                        </i-col>
                        <!-- <i-col :lg="{ span: 24}">
                            <FormItem label="联系人" prop="currentPersonnel">
                                <Input v-model="formItems.SpecialArea" placeholder="请输入姓名" style="width: 300px" />
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="联系电话" prop="currentPersonnel">
                                <Input v-model="formItems.SpecialArea" placeholder="请输入电话" style="width: 300px" />
                            </FormItem>
                        </i-col>-->
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose('userClose')">取消</Button>
                <Button type="primary" size="large" @click="handleSubmitFactory('formItems')">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
/**
 * 商品新建 编辑
 */
import Dictionaries from '@/components/Dictionaries'
import Api from './service'
import { setTimeout } from 'timers'

export default {
    name: 'ProductListJump',
    components: {
        Dictionaries
    },
    data() {
        const validatorFactoryID = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.FactoryID == '' || !this.formItem.FactoryID) {
                    callback(new Error('请选择生产厂家'))
                } else {
                    callback()
                }
            }, 100)
        }
        const validatorMethod = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.Method == '' || !this.formItem.Method) {
                    callback(new Error('请选择药品剂型'))
                } else {
                    callback()
                }
            }, 100)
        }
        /* 商品分类校验 */
        const validatorCategoriesList = (rule, value, callback) => {
            if (this.categoriesListValue.length == 0) {
                callback(new Error('请选择商品分类'))
            } else {
                callback()
            }
        }
        return {
            Increase: {
                FactoryID: '',
                ProName: ''
            },
            count: 0,
            positionX: 0,
            positionY: 0,
            visible: false,
            visibles: false,
            visibless: false,
            imgSrc:
                'https://publish-pic-cpu.baidu.com/cf60d547-a35c-4e77-8ef3-30d0e5b0e48b.jpeg@q_90,w_450',
            deg: 0,
            multiples: 1,
            content: '',
            ModalTitle: '新建厂家',
            isModal: false,
            Factoryloading: false,
            FactoryList: [],
            isImg: false,
            categoriesList: [],
            categoriesListValue: [],
            isAsyncSelect: false,
            imglist: {
                PictureTop: [],
                PictureList: [],
                PictureSmall: []
            },
            imgDefaultList: {
                PictureTop: [],
                PictureList: [],
                PictureSmall: []
            },
            formItem: this.initFormItem(),
            formItems: {
                FactoryName: ''
            },
            ruleValidate: {
                categoriesList: [
                    {
                        required: true,
                        validator: validatorCategoriesList,
                        message: '请选择不可为空',
                        trigger: 'change'
                    }
                ],
                FactoryID: [
                    {
                        required: true,
                        validator: validatorFactoryID
                    }
                ],
                Method: [
                    {
                        required: true,
                        validator: validatorMethod
                    }
                ],
                FactoryName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ProName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShortName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PriceOld: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PayByPoint: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PriceNew: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Commission: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitBuy: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShelfLife: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitSales: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Spec: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Rate: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                StdDocID: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitDoseName: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitDoseVal: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                BarCode: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                SupCode: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PinYinCode: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShowSort: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                PriceUnit: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                StockWarn: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                ShowCount: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                UnitCount: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ],
                Dose: [
                    {
                        required: true,
                        message: '请输入不可为空',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    mounted() {
        const { id } = this.$route.params
        Api.getcategoriesList().then(res => {
            this.categoriesList = res.data
        })
        Api.getAllFactory().then(res => {
            this.FactoryList = res.data
        })
        if (id > 0) {
            Api.getItemInfo({
                id
            }).then(res => {
                this.formItem = {
                    ...res.data,
                    // Status: res.data.Status + '',
                    // IsVirtual: res.data.IsVirtual + '',
                    // State: res.data.State + '',
                    PriceOld: res.data.PriceOld + '',
                    // PayByPoint: res.data.PayByPoint + '',
                    PriceNew: res.data.PriceNew + '',
                    // Commission: res.data.Commission + '',
                    UnitCount: res.data.UnitCount + '',
                    PriceUnit: res.data.PriceUnit + '',
                    Method: res.data.Method + '',
                    ShelfLife: res.data.ShelfLife + '',
                    IsService: res.data.IsService + ''
                    // ShowSort: res.data.ShowSort + '',
                    // StockWarn: res.data.StockWarn + '',
                    // ShowCount: res.data.ShowCount + ''
                }
                res.data.TypeOne &&
                    this.categoriesListValue.push(res.data.TypeOne)
                res.data.TypeTwo &&
                    this.categoriesListValue.push(res.data.TypeTwo)
                res.data.TypeThree &&
                    this.categoriesListValue.push(res.data.TypeThree)
                this.isAsyncSelect = true
            })
        } else {
            this.isImg = true
            this.isAsyncSelect = true
            this.formItem = this.initFormItem()
        }
    },
    methods: {
        //厂家选择
        handleFactory(item) {
            this.Increase.FactoryID = item.ID
            this.Increase.ProName = item.SupplierName
        },
        //
        filterMethod(value, option) {
            return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
        },
        auditRejected() {
            Api.drugApplyReject({
                id: this.$route.params.id
            }).then(res => {
                if (res.state == 'success') {
                    this.$Message.success('操作成功')
                    this.$router.go(-1)
                } else {
                    this.$Message.error(res.message)
                }
            })
        },
        //放大
        handleView(type) {
            if (type == 'visible') {
                this.visible = true
                this.visibles = false
                this.visibless = false
            } else if (type == 'visibles') {
                this.visible = false
                this.visibles = true
                this.visibless = false
            } else {
                this.visible = false
                this.visibles = false
                this.visibless = true
            }
        },

        handleClose(type) {
            if (type == 'userClose') {
                this.isModal = false
            } else {
                this.isModal = false
            }
        },
        //创建厂家
        addFactory() {
            this.isModal = true
        },
        //确认
        handleSuccess() {
            Api.AffProduct({
                PID: this.formItem.ID
            }).then(res => {
                if (res.state == 'success') {
                    this.$Message.success('操作成功')
                    this.$router.go(-1)
                } else {
                    this.$Message.error(res.message)
                }
            })
        },

        setMethod(item, value) {
            this.formItem[value] = item
        },
        setMethods(item, value, data) {
            this.formItem[value] = data.Dname
        },
        /* 关闭页面 */
        closePage() {
            this.$router.push({
                path: '/products-increase'
            })
        },

        remoteMethod(query) {
            Api.getAllFactory().then(res => {
                this.FactoryList = res.data
                if (query !== '') {
                    this.Factoryloading = true
                    setTimeout(() => {
                        this.Factoryloading = false
                        this.FactoryList = this.FactoryList.filter(
                            item =>
                                item.SupplierName.toLowerCase().indexOf(
                                    query.toLowerCase()
                                ) > -1
                        )
                    }, 200)
                } else {
                    this.FactoryList = []
                }
            })
        },
        /* 供应商选择 */
        setDictionaries(item, value) {
            this.formItem[value] = item.ID + ' '
        },
        //提交厂家
        handleSubmitFactory(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    Api.AddFactory({
                        SupplierName: this.formItems.FactoryName
                    }).then(() => {
                        Api.getAllFactory().then(res => {
                            this.FactoryList = res.data
                            this.$Message.success('操作成功')
                            this.isModal = false
                        })
                    })
                }
            })
        },
        //下一条
        handleGetNext() {
            Api.GetNext({
                id: this.$route.params.id
            }).then(res => {
                if (res.data == '') {
                    this.$Message.error('已是最后一条', 5)
                } else {
                    this.$router.push({
                        path: `/products-increase-check/${res.data.ID}`
                    })
                    Api.getItemInfo({
                        id: this.$route.params.id
                    }).then(res => {
                        this.formItem = {
                            ...res.data,
                            Status: res.data.Status + '',
                            IsVirtual: res.data.IsVirtual + '',
                            State: res.data.State + '',
                            PriceOld: res.data.PriceOld + '',
                            PayByPoint: res.data.PayByPoint + '',
                            PriceNew: res.data.PriceNew + '',
                            Commission: res.data.Commission + '',
                            UnitCount: res.data.UnitCount + '',
                            PriceUnit: res.data.PriceUnit + '',
                            Method: res.data.Method + '',
                            ShelfLife: res.data.ShelfLife + '',
                            ShowSort: res.data.ShowSort + '',
                            StockWarn: res.data.StockWarn + '',
                            ShowCount: res.data.ShowCount + ''
                        }
                        res.data.TypeOne &&
                            this.categoriesListValue.push(res.data.TypeOne)
                        res.data.TypeTwo &&
                            this.categoriesListValue.push(res.data.TypeTwo)
                        res.data.TypeThree &&
                            this.categoriesListValue.push(res.data.TypeThree)
                        this.isAsyncSelect = true
                    })
                }
            })
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                let data = {
                    ...this.formItem,
                    TypeOne: this.categoriesListValue[0]
                        ? this.categoriesListValue[0]
                        : null,
                    TypeTwo: this.categoriesListValue[1]
                        ? this.categoriesListValue[1]
                        : null,
                    TypeThree: this.categoriesListValue[2]
                        ? this.categoriesListValue[2]
                        : null
                }
                if (valid) {
                    Api.DrugCheck({
                        Drug: data,
                        Increase: {
                            ID: data.ID,
                            ...this.Increase
                            // FactoryID:this.Increase.FactoryID,
                            // ProName:this.Increase.ProName
                        }
                    }).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功')
                            this.$router.go(-1)
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
                }
            })
        },
        /* 表单数据 */
        initFormItem() {
            return {
                ShortName: '',
                BarCode: '',
                PriceOld: '0',
                UnitBuy: '',
                UnitSales: '',
                PriceNew: '0',
                // PayByPoint: '0',
                // Commission: '0',
                Spec: '',
                ShelfLife: null,
                StockWarn: '0',
                PictureTop: [],
                Detail: '',
                SupCode: null,
                PictureList: [],
                PictureSmall: [],
                // ShowCount: '0',
                // ShowSort: '0',
                PriceUnit: '1',
                // IsVirtual: 'false',
                // State: '1',
                ShortDes: '',
                Dose: '',
                Rate: '',
                UnitCount: '1',
                StdDocID: '',
                UnitDoseName: '',
                UnitDoseVal: '',
                PinYinCode: '',
                KeyWords: '',
                ProName: ''
            }
        }
    }
}
</script>

<style>
</style>

<style lang="less" scoped>
.wrap-card {
    height: 80vh;
    overflow-y: scroll;
    padding: 20px;
}
.wrap-card::-webkit-scrollbar {
    width: 0 !important;
}
.wrap-card {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.product-hr {
    background: #959595;
    height: 1px;
    margin: 10px 0;
}
.product-hr-title {
    color: #aaaaaa;
    font-size: 15px;
}
.outer_box {
    width: 100px;
    height: 100px;
}
.outer_box > div {
    white-space: nowrap;
    display: inline-block;
}
.outer_box > div > img {
    width: 100px;
    height: 100px;
    position: absolute;
}
</style>
<style scoped>
#drag >>> .ivu-modal-content {
    width: 900px !important;
    height: auto !important;
}
.auto >>> .ivu-auto-complete.ivu-select-dropdown {
    max-height: 200px !important;
}
.method >>> .ivu-select-disabled .ivu-select-selection {
    background-color: #fff !important;
    color: black !important;
}
.method >>> .ivu-select-selection {
    border: 0 !important;
}
.method >>> .ivu-select-arrow {
    color: #fff;
}
.categoriesList >>> .ivu-input {
    background-color: #fff !important;
    color: black !important;
    border: 0 !important;
}
.categoriesList >>> .ivu-cascader-arrow {
    color: #fff !important;
}
</style>

